<!--
 * @Author: lmh
 * @Date: 2021-08-18 16:46:46
 * @LastEditTime: 2021-08-19 15:52:07
 * @LastEditors: lmh
 * @Description: 修改密码
-->
<template>
  <div class="title">修改密码</div>
  <a-form
    ref="formRef"
    :model="formState"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-item ref="password" label="原密码" name="password">
      <a-input v-model:value="formState.password" />
    </a-form-item>
    <a-form-item ref="password1" label="新密码" name="password1">
      <a-input v-model:value="formState.password1" />
    </a-form-item>
    <a-form-item ref="password2" label="密码确认" name="password2">
      <a-input v-model:value="formState.password2" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">确认修改</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { defineComponent, reactive, ref, toRaw } from 'vue';
export default defineComponent({
  setup() {
    const formRef = ref();
    const formState = reactive({
      password: '',
      password1: '',
      password2: '',
    });
    const rules = {
      password: [
        {
          required: true,
          message: '请输入原密码',
          trigger: 'blur',
        },
      ],
      password1: [
        {
          required: true,
          message: '请输入新密码',
          trigger: 'blur',
        },
      ],
      password2: [
        {
          required: true,
          message: '请再次输入新密码',
          trigger: 'blur',
        },
      ],
    };

    const onSubmit = () => {
      formRef.value
        .validate()
        .then(() => {
          console.log('values', formState, toRaw(formState));
        })
        .catch(error => {
          console.log('error', error);
        });
    };

    return {
      formRef,
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 14,
      },
      formState,
      rules,
      onSubmit,
    };
  },
});
</script>

<style lang="scss" scoped>
.title {
  font-weight: bold;
}
</style>
